<template>
<div class="mybox-home">


<div class="imgbox">
      <el-carousel height="500px">
      <el-carousel-item v-for="item in imgList" :key="item.key">
      <img :src="item.src" alt="" style="width:100%;height:100%">
      </el-carousel-item>
    </el-carousel>
</div>

<div class="searchbox">
  <el-input
    placeholder="请输入想要查询的疾病"
    prefix-icon="el-icon-search"
    v-model="homeSearch" class="searchinput">
  </el-input>
    <el-button type="primary" class="searchbtn" @click="search"  @keydown.enter="search">搜索</el-button>
</div>

<div class="searchinfo">
  <el-row>
    <el-col :span="8" v-for="(item, index) in searchList"
                    :key="index" >
      <div style="margin-top:15px">
 <el-card class="mycard">
  <div slot="header">
    <span>{{item.diseaseName}}</span>
  </div>
  <div>
   {{item.diseaseDesc}}
  </div>
</el-card>
      </div>
    </el-col>
  </el-row>
 
</div>




</div>
</template>

<script>

import axios from "axios";

export default {
    comSort: 1,
    comName: '首页',
    data () {
        return {
            menuList: [],
            imgList:[
              {key: '1', src: require('../../../assets/images/banner/医疗banner1.jpg')},
              {key: '3', src: require('../../../assets/images/banner/医疗banner2.jpg')},
              {key: '4', src: require('../../../assets/images/banner/医疗banner3.jpg')},
              {key: '5', src: require('../../../assets/images/banner/医疗banner4.jpg')},
              {key: '6', src: require('../../../assets/images/banner/医疗banner5.jpg')},
            ],
homeSearch:'',
searchList:[]
        }
    },
    methods: {
       search() {
         axios({
        url: "/api/user/searchhomedisease",
        method: "post",
        data: {
          diseaseName: this.homeSearch,
        },
      }).then(res => {
                this.searchList = res.data.list;

        console.log(res);
      });
       }
    },
    mounted () {

    }
}
</script>

<style lang="scss" scoped>
.mybox-home{
    width: 100%;
    height: 100%;

    .imgbox{
      width: 95%;
      margin: 0 auto;
      margin-top: 3px;
    }

  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }

  .searchbox{
    display: flex;
    margin-top: 5px;
    justify-content: flex-end;
    padding: 0px 35px;

    .searchinput{
      width: 40%;
      margin-right: 10px;
    }

    .searchbtn{
      border-radius: 3px;
    }
    
  }

  .searchinfo{
    padding: 0px 20px;
       margin-top: 10px;

       .mycard{
margin-left:10px;
margin-right:10px;
       }
  }
 
}
</style>